<template>
	<view>

		<!-- 分类大于5个 可以滚动 -->
		<view class="navbar_long" :style="{height}" v-if="navbarList.length>=6">
			<scroll-view scroll-x class="list_long" :scroll-left="curScrollWidth || '10px'" :style="{width:'100%',height}"
			 @scroll="handleLongNavbarScroll">
				<view class="item_long" :style="{height,lineHeight:height,padding: height?'0 30rpx':'30rpx'}" :class="{active: curNavbar.alias === item.alias}"
				 v-for="(item, index) in navbarList" :key="index" @click="handleChooseNavbar(item,index)">{{item.name}}</view>
			</scroll-view>
		</view>

		<view class="swiper-wrap" :style="{height: height? `calc(100vh - ${height})`:''}">
			<swiper class="swiper" :current="curSwiperIndex" @change="handleSwiper">
				<swiper-item class="swiper-item" v-for="(it_date, in_date) in dateList" :key="in_date">
					<scroll-view scroll-y="true" class="content-wrap" refresher-enabled enable-back-to-top :refresher-triggered="refresherTriggered"
					 @scrolltolower="handleScrolltolower(it_date,in_date)" @refresherrefresh="handleRefresherrefresh">
						<view class="content level_align flex_wrap flex_between">
							<!-- 暂无数据 S -->
							<view class="tp-w100" v-if="it_date.length == 0">
								<view class="tp-h98 tp-w100"></view>
								<text class="tp-h98 center_combo">您还没有相关订单</text>
								<view class="tp-h98 tp-w100"></view>
							</view>
							<!-- 暂无数据 E -->
							<view class="tp-w100" v-for="(item, index) in it_date" :key="index">
								<!-- 数据展示布局 S-->
								<view class="list-box tp-mt20 tp-ptb0lr30">
									<view class="top-radius tp-ptb0lr30 tp-bgf  tp-mb2" @click="pageJumps('./makeOrderDetail?id=' + item.id)">
										<view class=" level_align  flex_between tp-fc333 tp-h88 tp-fz28">
											<view class="level_align">
												<view class="no-team tp-lh40 tp-br8 center_combo tp-fz22 tp-yellow" :class="item.applyTypeDesc == '个人定制' ? 'no-team' : 'yes-team'">
													{{item.applyTypeDesc}}
												</view>
											</view>
											<text class="tp-fz26 " :class="item.status == 8 ? 'tp-red' : 'tp-yellow'">{{item.statusDesc}}</text>
										</view>
										<view class="tp-fc333 tp-fz28 tp-pb30 tp-lh44">
											<view class="level_align">
												<text class="tp-fc666 tp-mr20">出发地：</text>
												<view class="ellispsis1 flex-1">{{item.startCity}}</view>
											</view>
											<view class="level_align">
												<text class="tp-fc666 tp-mr20">目的地：</text>
												<view class="ellispsis1 flex-1">{{item.endCitys}}</view>
											</view>
											<view class="level_align" v-if="[2,3,4,5,6,7,8,9,10,11,12].includes(item.status - 0)">
												<text class="tp-fc666 tp-mr20">出行日期：</text>
												<view class="ellispsis1 flex-1">{{item.startTime}}至{{item.outTime}}(共{{item.travelDay}}天)</view>
											</view>
											<view class="level_align">
												<text class="tp-fc666 tp-mr20">下单时间：</text>
												<view class="ellispsis1 flex-1">{{item.createTime}}</view>
											</view>
											<view class="level_align" v-if="[1,2].includes(item.status - 0)">
												<text class="tp-fc666 tp-mr20"><text class="tp-mr30">总 </text>计：</text>
												<view class="ellispsis1  tp-red flex level_align align_baseline tp-fz24">￥<text class="tp-fz36 tp-fw600">{{item.totalRealAmount}}</text></view>
											</view>
											<view class="level_align" v-if="[3].includes(item.status - 0)">
												<text class="tp-fc666 tp-mr20"><text class="tp-mr30">需 </text>付：</text>
												<view class="ellispsis1  tp-red flex level_align align_baseline tp-fz24">￥<text class="tp-fz36 tp-fw600">{{item.totalRealAmount}}</text></view>
											</view>
											<view class="level_align" v-if="[4,5,6,7,8,9,10,11,].includes(item.status - 0)">
												<text class="tp-fc666 tp-mr20"><text class="tp-mr30">实 </text>付：</text>
												<view class="ellispsis1  tp-red flex level_align align_baseline tp-fz24">￥<text class="tp-fz36">{{item.totalRealAmount}}</text></view>
											</view>
										</view>

									</view>
									<view class="btm-radius  tp-h98 level_align flex_end tp-bgf " v-if="[0,1,3,4,6,7,8,9,10,11,12,13].includes(item.status - 0)">
										<!-- 按钮状态需要根据订单状态进行 静态按照页面判断 -->
										<view v-if="[4].includes(item.status - 0)" @click="NoPayCancel(item.id)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bcF5 tp-br12 tp-fc666 tp-mr30">
											取消订单
										</view>
										<view v-if="[0,1,3].includes(item.status - 0)" @click="giveUp(item.id)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bcF5 tp-br12 tp-fc666 tp-mr30">
											取消定制
										</view>
										<view v-if="[8,11,12,13].includes(item.status - 0)" @click="removeOrder(item.id)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bcF5 tp-br12 tp-fc666 tp-mr30">
											删除订单
										</view>
										<view v-if="[3].includes(item.status - 0)" @click="backApply(item.id)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bgf tp-br12 tp-fc tp-border1 tp-mr30"
										 style="border-color: #00B4FF;">
											重新定制
										</view>
										<view v-if="[3].includes(item.status - 0)" @click="pageJumps('../makeOrderSubmit?id=' + item.id)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
											确认定制
										</view>
										<view v-if="[4].includes(item.status - 0)" @click="handePay(item)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
											去支付
										</view>
										<view v-if="[6,10].includes(item.status - 0)" @click="handeRefundDect(item)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bcF5 tp-br12 tp-fc666 tp-mr30">
											申请退款
										</view>
										<view v-if="[9].includes(item.status - 0)" @click="pageJumps('../refundSchedule?pageName=make&orderId=' + item.id)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
											退款进度
										</view>
										<view v-if="[7].includes(item.status - 0)" @click="pageJumps('../hotelEvaluate?pageName=make&id='+ item.id + '&orderNo=' + item.orderNo)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bc tp-br12 tp-fcF tp-mr30">
											立即评价
										</view>
										<view v-if="[8].includes(item.status - 0)" @click="pageJumps('../hotelEvaluate?pageType=1&pageName=make&id='+ item.id)" class="btn tp-ptb0lr20 tp-h56 center_combo tp-bgf tp-br12 tp-fc tp-border1 tp-mr30"
										 style="border-color: #00B4FF;">
											查看评价
										</view>
										
									</view>
								</view>
								<!-- 数据展示布局 E-->
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="handleItem.totalRealAmount" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import CommonPaySecond from '../common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		data() {
			return {
				navbarList: [ // 有几个navBar
					{
						name: '全部',
						alias: '-1'
					}, {
						name: '申请中',
						alias: '0'
					}, {
						name: '定制中',
						alias: '1'
					},
					{
						name: '待确认',
						alias: '3'
					},
					{
						name: '待付款',
						alias: '4'
					},
					{
						name: '待使用',
						alias: '5'
					},
					{
						name: '进行中',
						alias: '6'
					},
					{
						name: '待评价',
						alias: '7'
					},
					{
						name: '已完成',
						alias: '8'
					},
					{
						name: '退款',
						alias: '9'
					}
				],
				height: '88rpx', // navbar 的高度
				swiperHeight: 'calc(100vh - 88rpx)', // 数据展示的高度
				curSwiperIndex: 0, // navbar 的index
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				loadMoreText: "加载中...",
				refresherTriggered: true, // 设置当前下拉刷新状态
				showLoadMore: false, // 加载更多
				curNavbar: { // 选中的导航数据
					name: '全部',
					alias: '-1'
				},
				list0: [], // 分类0 的数据
				list1: [], // 分类1 的数据
				list2: [], // 分类2 的数据
				list3: [], // 分类2 的数据
				list4: [], // 分类2 的数据
				list5: [], // 分类2 的数据
				list6: [], // 分类2 的数据
				list7: [], // 分类2 的数据
				list8: [], // 分类2 的数据
				list9: [], // 分类2 的数据
				maxScrollWidth: 0, // 最大滚动宽度
				
				handleItem: {}, // 当前操作的item
			};
		},
		onShow() {
			this.pageNum = 1
			this.getOrderList()
		},
		computed: {
			// 展示的数据
			dateList() { //每个分类的数据
				return [this.list0, this.list1, this.list2, this.list3, this.list4, this.list5, this.list6, this.list7, this.list8,this.list9]
			},
			curScrollWidth() {
				let num = 80 * (this.curSwiperIndex - 2)
				if (num >= this.maxScrollWidth) {
					num = this.maxScrollWidth
				}
				return num
			},
			orderInfo() {
				let o = {
					orderId: this.handleItem.id,
					type: 1,
					orderType: 4
				}
				return o
			},
		},
		methods: {
			// 申请退款
			handeRefundDect(item) {
				let data = {
					orderId: item.id,
					applyForMoney: item.totalRealAmount,
					refundPhone: item.phone,
					travelStart: item.startTime,
					travelEnd: item.outTime,
				}
				uni.navigateTo({
					url: '../hotelApplyForMoney?pageName=make&info=' + JSON.stringify(data)
				})
			},
			// 立即支付
			handePay(item) {
				this.handleItem = item
				this.$refs.commonPay.show()
			},
			// 余额支付成功
			payMoney(pwd) {
				this.$http.post(this.$api.payCustomizedOrderByYue, {
					orderId: this.handleItem.id,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						this.pageNum = 1
						this.getOrderList()
						uni.showToast({
							title: '支付成功'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				this.pageNum = 1
				this.getOrderList()
				uni.showToast({
					title: '支付成功'
				})

			},
			// 重新定制
			backApply(id) {
				this.$http.get(this.$api.backApply + '?orderId=' + id).then(res => {
					if (res.code === 200) {
						this.pageNum = 1
						this.getOrderList()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 删除订单
			removeOrder(id) {
				this.$http.get(this.$api.makeRemoveTravelGroupOrder + '?orderId=' + id).then(res => {
					if (res.code === 200) {
						this.pageNum = 1
						this.getOrderList()
						uni.showToast({
							title: '删除订单',
							icon: 'none'
						})
					}
				})
			},
			// 放弃定制  待支付之前
			giveUp(id) {
				this.$http.get(this.$api.giveUp + '?orderId=' + id).then(res => {
					if (res.code === 200) {
						this.pageNum = 1
						this.getOrderList()
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
					}
				})
			},
			// 未支付取消订单 待支付
			NoPayCancel(id) {
				this.$http.get(this.$api.makeNoPayCancel + '?orderId=' + id).then(res => {
					if (res.code === 200) {
						this.pageNum = 1
						this.getOrderList()
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})

					}
				})
			},
			// 获取列表
			getOrderList() {
				this.$http.get(this.$api.customizedStatusList + '?status=' + this.curNavbar.alias + '&pageSize=10&pageNum=' + this
						.pageNum)
					.then(res => {
						this.stopPullDownRefresh()
						this.showLoadMore = false;
						if (res.code === 200) {
							this.last_page = res.data.pageTotal
							if (this.pageNum > 1) {
								this['list' + this.curSwiperIndex] = this['list' + this.curSwiperIndex].concat(res.data.result);
							} else {
								this['list' + this.curSwiperIndex] = res.data.result
							}
						}
					})
			},
			// 处理选择导航条
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.curSwiperIndex = i
				console.log('handleChooseNavbar导航条改变', item, i)
			},
			// 处理swiper
			handleSwiper(e) {
				let i = e.detail.current
				this.curNavbar = this.navbarList[i]
				this.handleChooseNavbar(this.curNavbar, i)
				this.pageNum = 1
				this.getOrderList()
			},
			// 计算滚动
			handleLongNavbarScroll(e) {
				this.maxScrollWidth = e.detail.scrollWidth * 2 - 750
			},
			// 滚动到底部
			handleScrolltolower(item, i) {
				// console.log('handleScrolltolower滚动到底部', item, i);
				this.showLoadMore = true;
				if (this.pageNum < this.last_page) {
					this.pageNum++
					this.getOrderList();
				} else {
					this.loadMoreText = "已没有更多数据!"
				}
			},
			// // 下拉刷新
			handleRefresherrefresh(item, i) {
				this.refresherTriggered = true
				this.pageNum = 1
				this.getOrderList()
			},
			// 停止刷新
			stopPullDownRefresh() {
				this.refresherTriggered = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	// <!--大于五个的样式-->
	.navbar_long {
		background-color: #fff;

		.list_long {
			white-space: nowrap;
			overflow: hidden;

			.item_long {
				font-size: 32rpx;
				font-weight: bold;
				transition: all 0.1s ease-in;
				display: inline-block;

				&.active {
					color: $tc;
					position: relative;

					&::before {
						content: '';
						height: 6rpx;
						width: 36rpx;
						border-radius: 3rpx;
						background-color: $tc;
						position: absolute;
						bottom: 0rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}

	.swiper-wrap {
		.swiper {
			.swiper-item {
				.content-wrap {
					height: 100%;
					box-sizing: border-box;

					.content {
						// padding: 20rpx 30rpx;
					}
				}
			}
		}
	}

	.list-box {
		.top-radius {
			border-radius: 12rpx 12rpx 0 0;
		}

		.btm-radius {
			border-radius: 0 0 12rpx 12rpx;
		}

		.list-img {
			width: 190rpx;
			height: 160rpx;
		}

		.no-team {
			width: 118rpx;
			background: #FFF2E0;
		}

		.yes-team {
			width: 118rpx;
			background: #FFE8E6;
		}
	}
</style>
